<template>
  <div class="singer-table">
    <div class="singer-container">
      <div class="handle-box">
        <el-form :inline="true" :model="searchParams" @keyup.enter.native="getSingerByPage()">
          <el-form-item>
            <el-input v-model="searchParams.name" placeholder="参数名" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getSingerByPage()">查询</el-button>
            <!--<el-button v-if="isAuth('product:brand:save')" type="primary" @click="singerAddDialogVisible=true">新增</el-button>-->
            <!--<el-button v-if="isAuth('product:brand:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>-->
            <el-button  type="primary" @click="addOrUpdateHandler()">新增</el-button>
            <el-button  type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
          </el-form-item>
        </el-form>
        <el-table size="mini"
                  :border="true"
                  :data="singerList"
                  @selection-change="selectionChangeHandle">
          <el-table-column label="歌手图片"  align="center">
            <template slot-scope="scope">
              <div class="singer-img">
                <img :src="scope.row.pic">
              </div>
            </template>
          </el-table-column>
          <el-table-column label="歌手名称" align="center">
            <template slot-scope="scope">
              {{scope.row.name}}
            </template>
          </el-table-column>
          <el-table-column label="歌手性别" align="center">
            <template slot-scope="scope">
              {{getSex(scope.row.sex)}}
            </template>
          </el-table-column>
          <el-table-column label="歌手地区" align="center">
            <template slot-scope="scope">
              {{scope.row.location}}
            </template>
          </el-table-column>
          <el-table-column label="歌手介绍" align="center">
            <template slot-scope="scope">
              {{scope.row.introduction}}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="addOrUpdateHandler(scope.row.id)">修改</el-button>
              <el-button type="text" size="small" @click="deleteHandle()">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <add-or-update v-if="singerAddOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getSingerByPage"></add-or-update>
      </div>
    </div>
  </div>
</template>

<script>
import AddOrUpdate from './singer-add-or-update'
export default {
  name: 'singer',
  components: {
    AddOrUpdate
  },
  data () {
    return {
      singerAddOrUpdateVisible: false,
      searchParams: {
        name: ''
      },
      singerList: [],
      dataListSelections: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0
    }
  },
  computed: {
  },
  created () {
    this.getSingerByPage()
  },
  methods: {
    getSex (sex) {
      if (sex === 0) {
        return '女'
      } else if (sex === 1) {
        return '男'
      } else if (sex === 2) {
        return '组合'
      } else {
        return '未知'
      }
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandler (id) {
      this.singerAddOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle (id) {
      let ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.addSinger({
          data: ids
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getSingerByPage()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getSingerByPage()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getSingerByPage()
    },
    getSingerByPage () {
      let that = this
      that.singerList = []
      let request = {
        params: {
          page: that.pageIndex,
          limit: that.pageSize,
          name: that.searchParams.name
        }
      }
      console.log(88888)
      that.$api.getSingerByPage(request).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          that.singerList = res.data.data.list
          this.totalPage = res.data.data.totalCount
          that.singerAddDialogVisible = false
        } else {
          console.log(res.data)
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
  .singer-table{
    margin: auto;
    width: 80%;
  }
  .handle-box{
    margin-top: 10px;
    display: block;
  }
  .singer-img img{
    width: 140px;
    height: 140px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
  }
  body .el-table th.gutter{
    display: table-cell!important;
  }

</style>
